<template>
  <div class="home" v-loading="isLoading">
    <div class="top">
      <div class="psa">
        <el-cascader
          size="mini"
          style="width: 300px"
          :options="OrganTree"
          :props="{
            checkStrictly: true,
            value: 'Id',
            label: 'Name',
            children: 'Children',
          }"
          clearable
          v-model="checkHospitalId"
          @change="
            (query.orgId = checkHospitalId[checkHospitalId.length - 1]),
              getInfo()
          "
        ></el-cascader>
      </div>
      <div class="psb">
        <el-date-picker
          v-model="timeList"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          size="mini"
          @change="timer"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        <!-- <el-select
          v-model="query.year"
          placeholder="年度"
          @change="getInfo"
          size="small"
        >
          <el-option label="2024年度" value="2024"> </el-option>
        </el-select> -->
      </div>
      <span style="display: inline-block"
        ><dv-decoration-7 style="height: 30px"
          ><span style="font-size: 22px; display: inline-block; padding: 0 10px"
            >护理部管理大屏</span
          ></dv-decoration-7
        ></span
      >
    </div>
    <el-row style="margin-top: 20px">
      <el-col :span="24" style="padding: 10px">
        <div class="box" style="height: calc((100vh - 310px) / 2)">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">&nbsp;</p>
            <qiun-vue-ucharts
              type="mix"
              :opts="opts1"
              :chartData="chartData1"
              class="charts-box"
            />
          </dv-border-box-12>
        </div>
      </el-col>
      <el-col :span="24" style="padding: 10px">
        <div class="box" style="height: calc((100vh) / 2)">
          <dv-border-box-12 style="padding: 10px">
            <!-- <p class="box_title">牟定住院诊断分析表</p> -->
            <div
              class="charts-box container"
              style="
                overflow: auto;
                height: calc((100vh - 80px) / 2);
                margin-top: 0px;
              "
            >
              <el-table
                :data="tableList"
                style="width: 100%"
                :header-cell-style="{
                  color: '#fff',
                  backgroundColor: '#000080',
                }"
                :cell-style="tableRowClassName"
              >
                <el-table-column prop="HospitalName" label="机构名称">
                  <!-- <template slot-scope="scope">
                    <el-table-column
                      v-for="(item, index) in scope.row.Datas"
                      :key="index"
                      :prop="item.Count"
                      :label="item.TableName"
                    >
                    </el-table-column>
                  </template> -->
                </el-table-column>
                <el-table-column
                  prop="医院职务"
                  label="医院职务"
                ></el-table-column>
                <el-table-column
                  prop="岗位职别"
                  label="岗位职别"
                ></el-table-column>
                <el-table-column prop="能级" label="能级"></el-table-column>
                <el-table-column
                  prop="护理职称"
                  label="护理职称"
                ></el-table-column>
                <el-table-column
                  prop="学习请假记录"
                  label="学习请假记录"
                ></el-table-column>
              </el-table>
            </div>
          </dv-border-box-12>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
        
        <script>
import qiunVueUcharts from "@qiun/vue-ucharts";
import mapData from "@/common/staticData.json";
export default {
  components: {
    qiunVueUcharts,
  },
  data() {
    return {
      props: { multiple: true },
      checkHospitalId: [],
      OrganTree: [],
      query: {
        startTime: "",
        endTime: "",
        type: 0,
        orgId: "",
        filters: [
          {
            tableName: "医院职务",
            dateKeyName: "任职日期",
          },
          {
            tableName: "岗位职别",
            dateKeyName: "聘岗位级别日期",
          },
          {
            tableName: "能级",
            dateKeyName: "日期",
          },
          {
            tableName: "护理职称",
            dateKeyName: "取得资格日期",
          },
          {
            tableName: "学习请假记录",
            dateKeyName: "日期",
          },
        ],
      },
      timeList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "当天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      tableData1: [],
      chartData1: {},
      opts1: {
        fontColor: "#fff",
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          fontColor: "#fff",
          disableGrid: true,
          title: "",
          rotateLabel: true,
          rotateAngle: 20,
        },
        yAxis: {
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: "dash",
          dashLength: 4,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              position: "left",
              title: "",
            },
            {
              position: "right",
              title: "",
              textAlign: "left",
            },
          ],
        },
        extra: {
          mix: {
            column: {
              width: 20,
            },
          },
        },
      },
      chartData7: {},
      opts7: {
        fontColor: "#fff",
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [0, 0, 0, 0],
        dataLabel: true,
        enableScroll: false,
        extra: {
          map: {
            border: true,
            borderWidth: 1,
            borderColor: "#FFFAF0",
            fillOpacity: 0.6,
            activeBorderColor: "#F04864",
            activeFillColor: "#FACC14",
            activeFillOpacity: 1,
          },
        },
      },
      isLoading: false,
      isData: {},
      mapData,
      tableList: [],
    };
  },
  created() {},
  mounted() {
    this.getOrgan();
  },
  methods: {
    getOrgan() {
      this.$get("/Task/GetOrganTree?id=3015").then((res) => {
        this.OrganTree = res.Data;
      });
    },
    getInfo() {
      if (!this.query.startTime || !this.query.orgId) {
        return;
      }
      this.isLoading = true;
      this.getList();
      this.isLoading = false;
    },
    timer() {
      this.query.startTime = this.timeList[0];
      this.query.endTime = this.timeList[1];
      this.getInfo();
    },
    getList() {
      this.$post("/BsTj/Tj", this.query).then((res) => {
        var list = [];
        for (var i in res.Data) {
          var item = {
            HospitalName: res.Data[i].Name,
            医院职务: res.Data[i].Datas[0].Count,
            岗位职别: res.Data[i].Datas[1].Count,
            能级: res.Data[i].Datas[2].Count,
            护理职称: res.Data[i].Datas[3].Count,
            学习请假记录: res.Data[i].Datas[4].Count,
          };
          list.push(item);
        }
        this.tableList = list;
        this.getServerData1();
      });
    },
    tableRowClassName({ row, rowIndex }) {
      return "background: #002E85;color:#fff;";
    },
    getServerData1() {
      var list1 = [];
      var list2 = [];
      var list3 = [];
      var list4 = [];
      var list5 = [];
      var list6 = [];
      for (var i in this.tableList) {
        list1.push(this.tableList[i].HospitalName);
        list2.push(this.tableList[i].医院职务);
        list3.push(this.tableList[i].岗位职别);
        list4.push(this.tableList[i].能级);
        list5.push(this.tableList[i].护理职称);
        list6.push(this.tableList[i].学习请假记录);
      }
      let res = {
        categories: list1,
        series: [
          {
            name: "医院职务",
            type: "column",
            data: list2,
          },
          {
            name: "岗位职别",
            type: "column",
            data: list3,
          },
          {
            name: "能级",
            type: "column",
            data: list4,
          },
          {
            name: "护理职称",
            type: "column",
            data: list5,
          },
          {
            name: "学习请假记录",
            type: "column",
            data: list6,
          },
        ],
      };
      this.chartData1 = JSON.parse(JSON.stringify(res));
    },
    getServerData7() {
      let res = { series: this.mapData.features };
      this.chartData7 = res;
    },
  },
  filters: {},
};
</script>
        
        <style scoped lang="scss">
.home {
  width: 100%;
  height: calc(100vh - 46px);
  background-image: url("../../assets/image/home_bj.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 15px;
  .top {
    text-align: center;
    color: #fff;
    .psa {
      z-index: 999;
      position: absolute;
      top: 20px;
    }
    .psb {
      z-index: 999;
      position: absolute;
      right: 30px;
      top: 20px;
    }
    .search_style {
      width: 450px;
      position: absolute;
      left: 0;
    }
    .search_style2 {
      width: 150px;
      position: absolute;
      left: 160px;
    }
    .search_style3 {
      width: 150px;
      position: absolute;
      left: 320px;
    }
  }
  .box {
    background-color: rgba(0, 0, 0, 0.1);
    height: calc((100vh) / 3);
    //   margin-bottom: 15px;
    border-radius: 15px;
    .box_title {
      text-align: center;
      color: rgb(152, 253, 250);
      padding: 5px 0;
      padding-bottom: 0;
    }
  }
  .box2 {
    // height: calc((100vh - 190px) / 3);
    margin-bottom: 15px;
    border-radius: 15px;
    .box_title {
      text-align: center;
      color: rgb(152, 253, 250);
      padding: 5px 0;
      padding-bottom: 0;
    }
  }
  .charts-box {
    width: 100%;
    height: calc((100vh - 400px) / 2);
  }
}

//
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 10px;
}
::v-deep .el-input__inner {
  background-color: #00083e;
  color: #fff;
  border: 1px solid #31cae4;
}

.el-select-dropdown__item {
  line-height: 35px;
  color: #fff;
  background-color: #00083e;
}
::v-deep .el-select-dropdown {
  background-color: transparent;
  border: 1px solid blue;
}
::v-deep .el-select-dropdown__list {
  padding: 0 !important;
}
::v-deep .el-popper[x-placement^="bottom"] {
  margin-top: 0px;
}
::v-deep .el-popper .popper__arrow,
::v-deep .el-popper .popper__arrow::after {
  display: none;
}
.el-select-dropdown__item:hover {
  background-color: rgba(0, 225, 219, 0.690196078431373);
}
::v-deep .el-range-editor--mini .el-range-input {
  background-color: #00083e;
  color: fff;
}
::v-deep .el-range-editor--mini .el-range-separator {
  color: #fff;
}
</style>
      
      